<template>
  <div class="container">
    <!-- 搜索框 -->
    <div class="flex">
      <div class="plr15">
        <el-date-picker
          v-model="date"
          :type="dateType"
          :value-format="formatType"
          placeholder="日期"
          :disabled-date="handleDisabledDate"
        />
      </div>
      <el-button
        v-blur
        class="ml15"
        :icon="Search"
        type="primary"
        plain
        @click="handleSearch">
        搜索
      </el-button>
    </div>
    <Tab
      :data="tabData"
      class="mt15 plr15"
      @handle-tab="handleTab" />
    <SolidBorder class="t mt15">
      <EchartsBars :options="options"/>
    </SolidBorder>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watchEffect, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import Tab from '@/components/Tab/index.vue'
import type { ITab } from '@/types/tab'
import SolidBorder from '@/components/SolidBorder/index.vue'
import EchartsBars from '@/components/Echarts/bars.vue'
import { getOptions } from './options'
const date = ref<string>()
const dateType = ref('date')
const formatType = ref('YYYY-MM-DD')

const options = reactive(
  getOptions(
    ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        name: 'a'
      },
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        name: 'b'
      }
    ]
  )
)
const tabId = ref('')
const handleTab = (id: string) => {
  tabId.value = id
}
watch([tabId], () => {
  switch (tabId.value) {
  case '1':
    dateType.value = 'date'
    formatType.value = 'YYYY-MM-DD'
    break
  case '2':
    dateType.value = 'month'
    formatType.value = 'YYYY-MM'
    break
  case '3':
    dateType.value = 'year'
    formatType.value = 'YYYY'
    break
  }
})
watchEffect(() => {
  console.log('tabId:-dateType:', tabId, dateType.value)
})
const handleSearch = () => {
  console.log('date：', date)
}
const tabData: ITab[] = [
  { text: '日', id: '1' },
  { text: '月', id: '2' },
  { text: '年', id: '3' }
]
const handleDisabledDate = (d: Date) => {
  return d.getTime() - Date.now() > 0
}
</script>

<style lang="scss" scoped>
$color: #fff;
$primary_color: #29f1fa;
.container {
  height: 100%;
  width: calc(100% - 20rem);
  color: $color;
  padding: 1.5rem;
  box-sizing: border-box;
}
.h444 {
  height: 44.4rem;
}
.eh {
  height: calc(100vh - 6.9rem - 20rem - 3rem - 6rem - 70px);
}
.h100 {
  height: 100%;
}
.st-h {
  height: 20rem;
  // padding: 1.5rem;
  box-sizing: border-box;
}
:deep(.el-input__inner) {
  color: #fff;
}
:deep(.el-input__wrapper) {
  background: transparent;
}
:deep(.el-range-input) {
  --el-text-color-regular: $color;
}
:deep(.el-range-separator) {
  --el-text-color-primary: $color;
}
.t {
  height: calc(100% - 90px - 1.5rem);
  width: 100%;
  position: relative;
}
// :deep(.el-table) {
//   --el-table-border: 1px solid #148285;
//   --el-table-bg-color: transparent;
//   --el-table-text-color: $color;
//   --el-table-header-bg-color: rgba($primary_color, 30%);
//   --el-table-tr-bg-color: rgba($primary_color, 30%);
//   --el-table-header-text-color: $color;
//   --el-text-color-secondary: $color;
//   --el-table-border-color: transparent;
//   border: var(--el-table-border);
// }
:deep(.el-button) {
  background: transparent;
}
</style>
